<template>
  <div>
    <h1>My</h1>
    <h2>query - {{ $route.query }}</h2>
    <h2>params - {{ $route.params }}</h2>
    <!-- <h2>{{ $route.params.xxx }}</h2> -->
    <button @click="goFind">去find</button>
    <button @click="goFindWithQuery">去find 带query参数</button>
  </div>
</template>

<script>
export default {
  name: "MyPage",
  created() {
    // /path/值 需要配置路由对象 动态路由 /path/:xxx 这个xxx就是params里的键名
    console.log(this.$route.params.xxx);
  },
  methods: {
    // js跳转页面 用的是$router
    // $router 和 我们 new VueRouter是一个东西
    // push方法 里面传对象
    /**
     * {
     *  path: '路径'
     * }
     *
     * path的写法是可以简写的 包括带参数也可以简写
     * this.$router.push('路径')
     * 或者
     * {
     *  name: '路由名'
     * }
     
     */
    goFind() {
      console.log("go find");
      // this.$router.push({
      //   path: "/find",
      // });
      this.$router.push("/find");
    },
    goFindWithQuery() {
      // this.$router.push({
      //   path: "/find",
      //   query: {
      //     a: 1,
      //     b: 2,
      //     c: 3,
      //     d: 4,
      //   },
      // });
      // this.$router.push("/find?a=1&b=2&c=3&d=4");
      // 建议 如果？后面拼接参数，如果参数不多就用简写 如果多就用完整写法 对象的写法
      this.$router.push({
        name: "abc",
        query: {
          a: 1,
          b: 2,
          c: 3,
        },
      });
    },
  },
};
</script>

<style>
</style>